
<template>
	<view class="search-body">
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="search-head">
			<view class="back" @click="back()">
				<uni-icon type="arrowleft" size="30" color="#999999"></uni-icon>
			</view>
			<view class="search-bar">
				<uni-icon type="search" color="#DBDBDB" size='20' style='margin: 15upx 30upx;'></uni-icon>
				<input placeholder="购物" v-model="searchText" type="text">
			</view>
			<view class='search-btn'>搜索</view>
		</view>
		
		<view class="benyue">
			<navigator url="timeYue" class="kuang">
				<text>本月</text>
				<image src="../../../static/myPic/xiaJT.png"></image>
			</navigator>
			<view>
				<view class="zhichu">支出￥1,098.12</view><br>
				<view class="shouru">收入￥109</view>
			</view>
		</view>
		
		<navigator class="pic1All">
			<view class="pic1">
				<image src="../../../static/myPic/sousuoGW.png"></image>
			</view>
			<view class="pic1Text">
				<h4>宫廷古风中国风口红 长相思持久保湿防水</h4>
				<p>298.00</p>
				<h5>电商购物</h5>
				<h6>10-25  12:00</h6>
			</view>
		</navigator>
		
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				searchText:'',
				
			}
		},
		methods: {
			chooseSearch(str){
				this.searchText = str
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		created(){
			
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.search-body{
		width: 100%;
		height: 100vh;
	}
	.search-head{
		width: 750upx;
		height: 60upx;
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		
	}
	.back{
		width: 60upx;
		height: 60upx;
		margin-left: 20upx;
		
	}
	.back uni-icon{
		width: 30upx;
		height: 30upx;
	}
	.search-bar{
		width: 500upx;
		border-radius: 30upx;
		height: 60upx;
		border: #BBBBBB solid 1upx;
		margin-left: 20upx;
		margin-right: 20upx;
		display: flex;
		flex-direction: row;
	}
	.search-bar input{
		width: 340upx;
		height: 40upx;
		display: block;
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 40upx;
	}
	.search-btn{
		width: 130upx;
		height: 60upx;
		border-radius: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		
		margin-right: 20upx;
	}
	
	.benyue{
			width: 749upx;
			height: 116upx;
			opacity: 1;
			background: rgba(246,246,246,1);
			margin-top: 15upx;
			display: flex;
			flex-direction: row;/*控制方向 --*/
			justify-content: space-between; /*对齐方式*/
			align-items: center;/*行高*/
		}
		.benyue .kuang{
			margin-left: 43upx;
			margin-top: 30upx;
			width: 123upx;
			height: 53upx;
			opacity: 1;
			background: rgba(255,255,255,1);
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 50upx;
		}
		.kuang text{
			width: 65upx;
			opacity: 1;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: rgba(51,51,51,1);
		}
		.kuang image{
			width: 14upx;
			height: 8upx;
			opacity: 1;
		}
		.bill{
			/* width: 230upx;
			height: 110upx;
			background: #4CD964;
			margin-left: 460upx; */
			
		}
		
		.benyue .zhichu{
			width: 197upx;
			height: 28upx;
			opacity: 1;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: rgba(153,153,153,1);
			margin-top: 14upx;
		}
		.benyue .shouru{
			width: 197upx;
			height: 28upx;
			opacity: 1;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: rgba(153,153,153,1);
			margin-top: 10upx;
		}
	
	.pic1All{
		background-color: #fff;
	}
			
	.pic1 image{
		float: left;
		width: 60upx;
		height: 60upx;
		margin-top: 32upx;
		margin-left: 34upx;
	}
			
	.pic1Text{
		margin-top: 34upx;
		float:left;
		margin-left: 12upx;
	}
			
	.pic1Text h4{
		margin-left: 46upx;
		width: 355upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		font-weight: bold;
		color: rgba(0,0,0,1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
		height: 33upx;
		float: left;
	}
			
	.pic1Text h5{
		margin-top: 26upx;
		margin-left: 47upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		line-height: 36upx;
	}
			
	.pic1Text h6{
		margin-left: 46upx;
		margin-top: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #999999;
				
	}
			
	.pic1Text p{
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-top: 2upx;
		margin-left: 109upx;
		float: left;
				/* margin-left: 364upx; */
		font-weight: bold;
		color: rgba(51,51,51,1);
	}
	
	
</style>
